<template>
  <div class="w-full h-[70px] bg-white flex items-center pl-[24px] text-[14px]"
    style="box-shadow: 0px -1px 4px 0px rgba(204, 204, 204, 0.25)">
    <div>当前页数：{{ current_page }}/{{ last_page }}</div>
    <div class="ml-[30px] text-[14px] flex">
      <div class="cursor-pointer" :class="{
        'text-[#696969]': current_page == 1,
        'text-[#EF6800]': current_page > 1,
      }" @click="back">
        上一页
      </div>
      <div class="ml-[20px] cursor-pointer" :class="{
        'text-[#696969]': current_page >= last_page,
        'text-[#EF6800]': current_page < last_page,
      }" @click="up">
        下一页
      </div>
    </div>
    <div class="ml-[80px] text-[14px]" v-if="costShow">
      总保费：<span class="text-[#F00505]">{{
        total_price ? total_price : "0"
      }}</span>
      元
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineProps, defineEmits, watchEffect } from "vue";
const props = defineProps({
  current_page: { type: Number as any },
  last_page: { type: Number as any },
  per_page: { type: Number },
  total: { type: Number },
  total_price: { type: Number },
  costShow: { type: Boolean, default: true }
});

const emit = defineEmits(["back", "up"]);
const back = () => {
  if (props.current_page == 1) {
    return
  }
  emit("back");
};
const up = () => {
  if (props.current_page >= props.last_page) {
    return
  }
  emit("up");
};
</script>
